<template>
    <div class="innovateOther">
        <div class="position">
            <div class="sub"><em>Main works of industrial design</em>  ID作品</div>
            <div class="title">其他作品</div>
        </div>

        <el-carousel :autoplay="false" :initial-index="initIndex" indicator-position="none" class="swiper_bd" ref="mySilder" @change="changeCarousel">
            <el-carousel-item v-for="(item,index) in newList" :key="index">
                <ul>
                    <li v-for="(child,index2) in item" :key="index2">
                        <template v-if="$route.params.id">
                            <template v-if="$route.params.id == index">
                                <el-image
                                    v-if="child.type=='mp4'"
                                    style="width:212px; height:142px"
                                    :src="child.poster+'&spec=1000'"
                                    fit="cover">
                                </el-image>
                                <el-image
                                    v-else
                                    style="width:212px; height:142px"
                                    :src="child.url[0]+'&spec=300'"
                                    fit="cover">
                                </el-image>
                            </template>
                            <template v-else>
                                <el-image
                                    style="width:212px; height:142px"
                                    src="http://mysolex/template/elec_201706_block/style/logo.png"
                                    fit="contain">
                                </el-image>
                            </template>
                        </template>
                        <template v-else>
                            <img v-if="child.type=='mp4'" :src="child.poster+'&spec=1000'" :preview="index+'-'+index2" :preview-text="child.title" style="width:212px; height:142px;object-fit:cover;">
                            <img v-else :src="child.url[0]+'&spec=1000'" :preview="index+'-'+index2" :preview-text="child.title" style="width:212px; height:142px;object-fit:cover;">
                        </template>
                        <div class="txt">
                            <h1>{{child.title}}</h1>
                            <div class="tags" v-if="child.label.length">
                                <span v-for="(tag,index3) in child.label" :key="index3">{{tag}}</span>
                            </div>
                            <div class="author">{{child.author}}</div>
                        </div>

                        <div class="num" v-if="index2%8 == 0">
                            <span v-if="initIndex+1 > 9 || index+1>9">
                                {{ initIndex ? initIndex+1 : index+1 }}
                            </span>
                            <span v-else>
                                0{{ initIndex ? initIndex+1 : index+1 }}
                            </span>
                        </div>
                    </li>
                </ul>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import { works_other } from '@/assets/js/getData';
    import { mapState,mapMutations } from 'vuex';
    import { setStore } from '@/assets/js/base';
    export default {
        name: 'innovateOther',
        data(){
            return {
                date:'',
                newList:[],
                list:[],
                initIndex:0,
                curPage:0,
                isMove:true,
            }
        },
        computed:{
            ...mapState([
                'baseInfo'
            ]),
            isLoad:function(){
                return this.baseInfo.year;
            }
        },
        watch:{
            isLoad:function(val){
                if(val){
                    this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                    this.init();
                }
            },
            $route(){
                this.$refs.mySilder.setActiveItem(this.$route.params.id);
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
        },
        mounted(){
            if(this.$route.params.id){
                this.initIndex = parseInt(this.$route.params.id)
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
            if(this.baseInfo.year){
                this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                this.init();
            }
        },
        destroyed(){
            // 离开本页面旧移除，除非是进入详情页
            if(this.isMove){
                sessionStorage.removeItem('i_other');
            }
        },
        methods:{
            ...mapMutations([
				'SETWORKSDETAIL'
			]),
            async init(){
                const res = await works_other({data:encodeURI(JSON.stringify({yf:this.date,zplb:'1'}))});
                if(res.code == '0'){
                    this.list = res.data;
                    this.newList = this.arrChunk(this.list,8);
                    // 回到刚刚点击进入的page
                    if(sessionStorage.getItem('i_other')){
                        this.$nextTick(()=>{
                            this.$refs.mySilder.setActiveItem(sessionStorage.getItem('i_other'));
                        })
                    }
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            },
            goPath(id,index,index2){
                this.isMove = false;
                sessionStorage.setItem('i_other',this.curPage);
                setStore("worksDetail",this.newList[index][index2]);
                this.SETWORKSDETAIL(this.newList[index][index2]);
                this.$router.push('/works/detail/'+id);
            },
            changeCarousel(page){
                this.curPage = page;
            }
        }
    }
</script>

<style scoped>
    .innovateOther{position: relative;height:100%;}

    .position{position: absolute;right:15px;top:10px;}
    .position .sub{line-height:20px;font-size: 12px;text-align:right;color: #7987a3;}
    .position .sub em{font-style: italic;}
    .position .title{width: 84px;line-height:24px;font-size: 14px;text-align:right;color: #353942;float:right;}

    .swiper_bd{height:100%;}
    .swiper_bd >>> .el-carousel__container{height:100%;}
    .swiper_bd >>> .el-carousel__container .el-carousel__item:after{content:"";position: absolute;width:50%;height: 100%;background: url(../../assets/img/shadow.png) no-repeat;top: 0;right: 0;z-index:1;}
    .swiper_bd >>> .el-carousel__arrow{width:60px;height:60px;font-size:24px;}
    .swiper_bd >>> .el-carousel__arrow i{font-weight:bold;}
    .swiper_bd >>> .el-carousel__arrow--left{left:40px;}
    .swiper_bd >>> .el-carousel__arrow--right{right:40px;}
    .swiper_bd ul{padding-top:40px;position: relative;z-index:9;}
    .swiper_bd li{float: left;width:50%;display:flex;padding:20px 60px;box-sizing:border-box;position: relative;cursor: pointer;}
    .swiper_bd li .num{color:#353942;font-size:16px;position: absolute;right:-578px;bottom:-582px;font-family: SimSun Regular, SimSun Regular-Regular;line-height:20px;}
    .swiper_bd li:after{content:"";position: absolute;left:60px;right:60px;bottom:0;height:1px;background:#e9ecf0;}
    .swiper_bd li .txt{flex:1;padding-left:30px;padding-top:10px;}
    .swiper_bd li .txt h1{font-size:16px;font-weight:normal;color:#353942;}
    .swiper_bd li .txt .tags{margin-top:6px;}
    .swiper_bd li .txt .tags span{padding:0 8px;background:#f8f9fb;border-radius:4px;line-height:20px;height:20px;font-size:12px;color:#8c96ab;margin-right:12px;display:inline-block;margin-top:4px;}
    .swiper_bd li .txt .author{color: #353942;margin-top:10px;}
    .swiper_bd li:last-child:after{display:none;}
    .swiper_bd li:nth-last-child(2):after{display:none;}
</style>